<template>
	<view>
	     <view class="top" :style="{'padding-top':topHight+'px'}">
	         <view class="up">
	           <span class="logo">开馨小店 |</span>
	           <div class="description">
	               <text>好玩 ·</text> <text>有趣 ·</text><text>粉粉 ·</text>
	           </div>
	         </view>
	         <view class="down">
				<!-- <u-button text="按钮"></u-button> -->
				<u-search size="20" style="usearch" height="70" search-icon="scan" :showAction="true" actionText="搜索" :animation="true" placeholder="日照香炉生紫烟" v-model="keyword">	
				</u-search>
	         </view>
			 <!-- 轮播图 -->
			 <lunboVue></lunboVue>
			 <!-- 多级菜单 -->
			 <u-scroll-list>
				<view class="scroll-list">
					<view
						class="scroll-list__line"
						v-for="(item, index) in menuArr"
						:key="index"
					>
						<view
							class="scroll-list__line__item"
							v-for="(item1, index1) in item"
							:key="index1"
							:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
						>
							<image
								class="scroll-list__line__item__image"
								:src="menuBaseUrl + item1.icon"
								mode=""
							></image>
							<text class="scroll-list__line__item__text">{{ item1.name }}</text>
						</view>
					</view>
				</view>
			</u-scroll-list>
	     </view>
	   
	   </view>
</template>

<script>
// import lunboVue from '@/'
import lunboVue from '../components/lunbo.vue'
export default {
	components: {
		'lunboVue':lunboVue
	},
		data() {
			return {
				goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				topHight: '',
				keyword: '遥看瀑布挂前川',
				menuArr: [
				[{
						name: '天猫新品',
						icon: '11.png'
					},
					{
						name: '今日爆款',
						icon: '9.png'
					}, {
						name: '天猫国际',
						icon: '17.png'
					}, {
						name: '饿了么',
						icon: '6.png'
					}, {
						name: '天猫超市',
						icon: '11.png'
					}, {
						name: '分类',
						icon: '2.png'
					}, {
						name: '天猫美食',
						icon: '3.png'
					}, {
						name: '阿里健康',
						icon: '12.png'
					}, {
						name: '口碑生活',
						icon: '7.png'
					}
				],
				[{
						name: '充值中心',
						icon: '8.png'
					},
					{
						name: '机票酒店',
						icon: '10.png'
					}, {
						name: '金币庄园',
						icon: '18.png'
					}, {
						name: '阿里拍卖',
						icon: '15.png'
					}, {
						name: '淘宝吃货',
						icon: '16.png'
					}, {
						name: '闲鱼',
						icon: '4.png'
					}, {
						name: '会员中心',
						icon: '6.png'
					}, {
						name: '造点新货',
						icon: '13.png'
					}, {
						name: '土货鲜食',
						icon: '14.png'
					}
				]
			]
			}
		},
	methods: {
		showMore() {
			uni.$u.toast('查看更多')
		},
		left() {
			console.log('left');
		},
		right() {
			console.log('right');
		}
		},
		onShow(){
		    let app = uni.getSystemInfoSync()
		    this.topHight = app.statusBarHeight
		}
	}
</script>

<style lang="scss" scoped>
.top{
    height: 178rpx;
    background-color: pink;
    padding: 0 30rpx;
    .up{
        display: flex;
        align-items: center;
        .logo{
            font-size: 25px;
        }
        .description{
            font-size: 17px;
            padding-left: 10rpx;
            text{
                 margin-right: 14rpx;
            }     
        }
    }
	.down{
		margin-top: 26rpx;
		::v-deep .u-search__content__input{
			font-size: 17px !important;
		}
		::v-deep .u-icon__icon{
			font-size: 20px !important;
		}
	}
}
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: #f56c6c;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #fff0f0;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;

		&__text {
			font-size: 12px;
			width: 12px;
			color: #f56c6c;
			line-height: 16px;
		}
	}

	&__line {
		@include flex;
		margin-top: 10px;

		&__item {
			margin-right: 15px;

			&__image {
				width: 61px;
				height: 48px;
			}

			&__text {
				margin-top: 5px;
				color: $u-content-color;
				font-size: 12px;
				text-align: center;
			}

			&--no-margin-right {
				margin-right: 0;
			}
		}
	}
}
</style>
